<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/common/common-css.jsp" %>
    <style>
        .m-hide {
            display: none;
            visibility: hidden;
            opacity: 0;
        }

        .table input[type="text"] {
            width: 100%;
        }

        .table > th {
            vertical-align: center;
            background-color: grey;
        }

        .td-item {
            width: 200px;
        }
    </style>
</head>
<body class="no-skin">
<div class="page-content">
    <div class="page-header">
        <h1>
            新增/编辑关键字回复信息
        </h1>
        <h5>关注文案优先级从高到低依次是 文字 --> 图文</h5>
    </div>
    <div class="page-content-area">
        <div class="row">
            <div class="col-xs-12 col-sm-12 widget-container-col">
                <div class="widget-box widget-color-blue">
                    <div class="widget-header widget-header-small">
                        <h6 class="widget-title lighter">
                            <i class="ace-icon glyphicon glyphicon-th-list"></i>基本信息
                        </h6>
                        <div class="widget-toolbar no-border">
                            <a href="#" data-action="collapse">
                                <i class="ace-icon fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <form class="form-horizontal" id="validation-form" method="post"
                                  enctype="multipart/form-data">
                                <input type="text" id="id" hidden name="id" value="${params.id}">
                                <table id="baseinfo"
                                       class="table table-bordered table-striped table-hover table-condensed table-responsive table">
                                    <tr>
                                        <td class="td-item"><label for="account">微信号:</label></td>
                                        <td>
                                            <select name="account" id="account">
                                                <option value="4">测试公众号</option>
                                                <option value="8105">菠萝优选</option>
                                                <option value="8103">有点零花</option>
                                                <option value="8119">菠萝钱柜</option>
                                                <option value="8120">西瓜钱柜</option>
                                                <option value="8121">熊花花</option>
                                                <option value="8118">布拿拿管卡花</option>
                                                <option value="8109">宝贝零花</option>
                                                <option value="8110">小熊零花</option>
                                                <option value="8111">钱哆哆</option>
                                                <option value="8112">任我财</option>
                                                <option value="8113">吾小钱</option>
                                                <option value="8114">喜乐花</option>
                                                <option value="8115">菠萝米花</option>
                                                <option value="8116">每日花</option>
                                                <option value="8117">菠萝花</option>
                                                <option value="8122">欢乐零花</option>
                                                <option value="8123">欢乐钱柜</option>
                                                <option value="8126">菠萝零花</option>
                                                <option value="8130">欢乐有钱</option>
                                                <option value="8131">优选锦鲤</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="status">状态:</label></td>
                                        <td>
                                            <select name="status" id="status">
                                                <option value="1" selected>上线</option>
                                                <option value="0">下线</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="sub">是否为关注回复文案:</label></td>
                                        <td><input type="checkbox" name="sub" id="sub" value="true"></td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="keyword">关键字:</label></td>
                                        <td><input type="text" name="keyword" id="keyword"></td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="approximate">模糊匹配:</label></td>
                                        <td><input type="checkbox" name="approximate" id="approximate" value="true"></td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="is_coupon">关键字下发优惠券:</label></td>
                                        <td><input type="checkbox" name="is_coupon" id="is_coupon" value="true"></td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="idx">排序:</label></td>
                                        <td><input type="text" name="idx" id="idx" placeholder="正序排序, 数字越大, 排序越靠后"
                                                   value="0"></td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="type">回复类型:</label></td>
                                        <td>
                                            <select name="type" id="type">
                                                <option value="0" selected>文字</option>
                                                <option value="1">图文</option>
                                                <option value="2">外部接口</option>
                                                <option value="3">图片</option>
                                            </select>
                                        </td>
                                    </tr>

                                    <tbody id="type-text">
                                    <tr>
                                        <td class="td-item"><label for="replay">文字内容:</label></td>
                                        <td><textarea id="replay" name="replay" rows="8" cols="100"></textarea></td>
                                    </tr>
                                    </tbody>

                                    <tbody id="type-api" class="m-hide">
                                    <tr>
                                        <td class="td-item"><label for="api">外部接口链接:</label></td>
                                        <td><input type="text" name="api" id="api"></td>
                                    </tr>
                                    </tbody>

                                    <tbody id="type-article" class="m-hide">
                                    <tr>
                                        <td class="td-item"><label for="title">图文标题:</label></td>
                                        <td><input type="text" name="title" id="title"></td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="link">跳转连接:</label></td>
                                        <td><input type="text" name="link" id="link"></td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="desc">图文介绍:</label></td>
                                        <td><input type="text" name="desc" id="desc"></td>
                                    </tr>
                                    <tr>
                                        <td class="td-item"><label for="upload">图文图片:</label></td>
                                        <td>
                                            <img style="width: 300px;height: 160px" id="preimg" name="preimg"
                                                 src="http://img.xmiles.cn/img/void.png"/>
                                            <input type="text" hidden="hidden" id="oldimg" name="oldimg" value=""/>
                                            <input id="upload" name="upload" class="form-control" type="file"
                                                   title="上传图片"/>
                                        </td>
                                    </tr>
                                    </tbody>
                                    
                                    <tbody id="type-image" class="m-hide">
                                    <tr>
                                        <td class="td-item"><label for="imageFile">图片:</label></td>
                                        <td>
                                            <img style="width: 300px;height: 160px" id="preImage" name="preImage"
                                                 src="http://img.xmiles.cn/img/void.png"/>
                                            <input type="text" hidden="hidden" id="image" name="image" value=""/>
                                            <input id="imageFile" name="imageFile" class="form-control" type="file"
                                                   title="上传图片"/>
                                        </td>
                                    </tr>
                                    </tbody>
                                    
                                    
                                </table>
                                <h3 style="color: red" id="errorMsg"></h3>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix form-actions">
            <div class="col-md-offset-3 col-md-9">
                <button class="btn  btn-inverse  no-border " onclick="doCancle()" id="delete">
                    <i class="ace-icon fa fa-undo bigger-160"></i>
                    取消
                </button>

                &nbsp; &nbsp; &nbsp;
                <button id="btn-save" name="btn-save" class="btn  btn-success  no-border" type="button"
                        onclick="doSave()">
                    <i class="ace-icon fa fa-floppy-o bigger-160"></i>
                    保存
                </button>
            </div>
        </div>
    </div>
</div>
<%@ include file="/common/common-js.jsp" %>
<script>
    var isEdit = false;
    var textBody = $('#type-text');
    var articleBody = $('#type-article');
    var apiBody = $('#type-api');
    var imageBody = $('#type-image');
    var id = $('#id');
    var api = $('#api');

    if (id.val()) {
        isEdit = true;
        $.getJSON(ctx + '/weixin/weixin_keyword_get.action', {id: id.val()}, function (json) {
            if (json && json.status === 0 && json.data) {
                var m = json.data;
                var $account = m.source;
                var $status = m.status;
                var $keyword = m.keyword;
                var $idx = m.orderNum;
                var $type = m.type;
                var $sub = m.subscribe;
                var $approximate = m.approximate;
                var $is_coupon = m.is_coupon;
                
                var $replay = m.replay;

                var $title = m.title;
                var $link = m.url;
                var $desc = m.desc;
                var $picUrl = m.picUrl;

                var $api = m.api;

                $('#account').val($account);
                $('#status').val($status);
                $('#keyword').val($keyword);
                $('#idx').val($idx);

                $('#type').val($type);
                if ($type === 0) {
                    textBody.removeClass('m-hide');
                    articleBody.addClass('m-hide');
                    apiBody.addClass('m-hide');
                    imageBody.addClass('m-hide');
                    
                    $('#replay').val($replay);
                }
                else if ($type === 1) {
                    articleBody.removeClass('m-hide');
                    textBody.addClass('m-hide');
                    apiBody.addClass('m-hide');
                    imageBody.addClass('m-hide');
                    
                    $('#title').val($title);
                    $('#link').val($link);
                    $('#desc').val($desc);
                    $('#preimg').attr('src', $picUrl);
                }
                else if ($type === 2) {
                    apiBody.removeClass('m-hide');
                    textBody.addClass('m-hide');
                    articleBody.addClass('m-hide');
                    imageBody.addClass('m-hide');
                    
                    $('#api').val($api);
                }
                else if ($type === 3) {
                	imageBody.removeClass('m-hide');
                    apiBody.addClass('m-hide');
                    textBody.addClass('m-hide');
                    articleBody.addClass('m-hide');
                    
                    $('#preImage').attr('src', $picUrl);
                }

                if ($sub === 1) {
                    $('#sub').prop('checked', true);
                    $('#keyword').prop('disabled', true);
                    $('#approximate').prop('disabled', true);
                    $('#is_coupon').prop('disabled', true);
                }

                if ($approximate === 1) {
                    $('#approximate').prop('checked', true);
                }
                if ($is_coupon === 1) {
                    $('#is_coupon').prop('checked', true);
                }

                
            }
            else {
                alert('请求服务器错误,请刷新重试！！');
            }
        })
    }

    $('#sub').on('click', function() {
        if ($(this).prop('checked')) {
            $('#keyword').prop('disabled', true);
            $('#approximate').prop('disabled', true);
            $('#is_coupon').prop('disabled', true);
        }
        else {
            $('#keyword').prop('disabled', false);
            $('#approximate').prop('disabled', false);
            $('#is_coupon').prop('disabled', false);
        }
    });

    $('#keyword').on('change', function () {
        var self = $(this);
        self.val(self.val().replace(/\s/g, ''));
    });

    $('#idx').on('change', function () {
        var self = $(this);
        if (!/^\d+$/.test(self.val())) {
            alert('排序依据必须是数字');
            self.val(0);
        }
    });

    $('#type').on('change', function () {
        var newVar = $(this).val();
        if (newVar === '0') {
            textBody.removeClass('m-hide');
            articleBody.addClass('m-hide');
            apiBody.addClass('m-hide');
            imageBody.addClass('m-hide');
        }
        else if (newVar === '1') {
            articleBody.removeClass('m-hide');
            textBody.addClass('m-hide');
            apiBody.addClass('m-hide');
            imageBody.addClass('m-hide');
        }
        else if (newVar === '2') {
            apiBody.removeClass('m-hide');
            articleBody.addClass('m-hide');
            textBody.addClass('m-hide');
            imageBody.addClass('m-hide');
        }
        else if(newVar == '3'){
        	textBody.addClass('m-hide');
        	articleBody.addClass('m-hide');
        	apiBody.addClass('m-hide');
        	imageBody.removeClass('m-hide');
        }
    });

    function verify() {
        var keyword = $('#keyword').val();
        var isSub = $('#sub').prop('checked');
        if (!isSub && !keyword) {
            alert('关键字不能为空');
            return false;
        }

        var idx = $('#idx').val();
        if (idx === '') {
            alert('排序依据不能为空');
            return false;
        }
        else if (!/^\d+$/.test(idx)) {
            alert('排序依据必须是数字');
            return false;
        }
        else if (parseInt(idx) > 999) {
            alert('排序依据不能大于999');
            return false;
        }

        var type = $('#type').val();
        if (type === '0') {
            var replay = $('#replay').val();
            if (!replay) {
                alert('回复文字不能为空');
                return false;
            }
        }
        else if (type === '1') {
            var title = $('#title').val();
            if (!title) {
                alert('图文标题不能为空');
                return false;
            }

            var desc = $('#desc').val();
            if (!desc) {
                alert('图文介绍不能为空');
                return false;
            }

            var link = $('#link').val();
            if (!link) {
                alert('跳转链接不能为空');
                return false;
            }
        }
        else if (type === '2') {
            var apiLink = api.val().trim();
            if (!apiLink) {
                alert('外部接口链接不能为空');
                return false;
            }
            else {
                if (apiLink.indexOf('http://') !== 0 && apiLink.indexOf('https://') != 0) {
                    alert('请输入合法外部接口链接, 以http://或https://开始');
                    return;
                }
            }
        }
        else if(type === '3'){
            return true;
        }
        else{
        	return false;	
        }

        return true;
    }

    $('#upload').change(function () {
        var file = this.files[0];
        var r = new FileReader();
        r.readAsDataURL(file);
        $(r).load(function () {
            $('#preimg').attr('src', this.result);
        });
    });
    
    $('#imageFile').change(function () {
        var file = this.files[0];
        var r = new FileReader();
        r.readAsDataURL(file);
        $(r).load(function () {
            $('#preImage').attr('src', this.result);
        });
    });
    
    
    function doSave() {
        if (!verify()) {
            return;
        }
        $("#btn-save").attr("disabled", "disabled");
        var $form = document.forms["validation-form"];
        // var data = $(document.forms["validation-form"]).serializeObject();
        // var url;
        if (isEdit) {
            $form.action = ctx + "/weixin/weixin_keyword_update.action";
            $form.submit();
        }
        else {
            $form.action = ctx + "/weixin/weixin_keyword_do_add.action";
            $form.submit();
        }
    }

    function doCancle() {
        parent.parent['__extdialog_active'].dialog('close');
    }
</script>
</body>
</html>
